<template>
  <div class="check-container">
    <!-- 背景图 -->
    <div class="background"></div>

    <!-- 一级界面：检查主菜单 -->
    <div v-if="currentView === 'main'" class="main-view">
      <div class="header">
        <h1><i class="el-icon-office-building"></i> 房屋检查管理系统</h1>
        <p class="subtitle">请选择要进行的检查类型</p>
      </div>

      <div class="menu-cards">
        <el-card
            v-for="item in menuItems"
            :key="item.type"
            class="menu-card"
            shadow="hover"
            @click.native="enterCheckType(item.type)"
        >
          <div class="card-icon" :style="{backgroundColor: item.color}">
            <i :class="item.icon"></i>
          </div>
          <h3 class="card-title">{{ item.title }}</h3>
          <div class="stats-container">
            <div class="stat-item">
              <span class="stat-label">本月完成</span>
              <span class="stat-value">{{ item.completed }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">待处理</span>
              <span class="stat-value">{{ item.pending }}</span>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 数据看板 - 已检查房屋信息 -->
      <el-card class="dashboard">
        <div slot="header" class="dashboard-header">
          <span>已检查房屋信息</span>
          <el-button
              style="float: right;"
              size="small"
              @click="refreshData"
              icon="el-icon-refresh"
          >
            刷新
          </el-button>
        </div>
        <div class="chart-container">
          <el-table
              :data="checkedHouses"
              border
              style="width: 100%"
              height="300"
          >
            <el-table-column
                prop="houseNumber"
                label="房屋编号"
                width="120"
            ></el-table-column>
            <el-table-column
                prop="type"
                label="检查类型"
                width="120"
            ></el-table-column>
            <el-table-column
                prop="area"
                label="检查区域"
                width="120"
            ></el-table-column>
            <el-table-column
                prop="score"
                label="综合评分"
                width="120"
            >
              <template #default="{row}">
                <el-rate
                    v-model="row.score"
                    disabled
                    :colors="['#F56C6C', '#E6A23C', '#67C23A']"
                    :max="3"
                ></el-rate>
              </template>
            </el-table-column>
            <el-table-column
                prop="checkTime"
                label="检查时间"
                width="180"
            ></el-table-column>
            <el-table-column
                prop="checker"
                label="检查人"
                width="120"
            ></el-table-column>
            <el-table-column
                label="操作"
                width="120"
            >
              <template #default="{row}">
                <el-button
                    size="mini"
                    @click="viewDetail(row)"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>

    <!-- 二级界面：具体检查类型 -->
    <div v-else-if="currentView === 'type'" class="type-view">
      <div class="type-header">
        <el-button
            icon="el-icon-arrow-left"
            @click="backToMain"
            size="small"
        >
          返回
        </el-button>
        <h2 class="type-title">{{ currentType.title }}检查</h2>
      </div>

      <div class="steps-container">
        <el-steps :active="checkStep" finish-status="success" align-center>
          <el-step title="选择房屋"></el-step>
          <el-step title="进行检查"></el-step>
          <el-step title="提交结果"></el-step>
        </el-steps>
      </div>

      <!-- 房屋选择 -->
      <div v-if="checkStep === 1" class="step-content">
        <h3 class="step-title">请选择要检查的房屋</h3>

        <div class="search-bar">
          <el-input
              placeholder="输入房屋编号搜索"
              v-model="houseSearch"
              clearable
              style="width: 300px; margin-bottom: 20px;"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>

        <el-row :gutter="20" class="area-row">
          <el-col
              v-for="house in filteredHouses"
              :key="house.id"
              :span="6"
              :xs="12"
              :sm="8"
              :md="6"
          >
            <div
                class="house-card"
                :class="{selected: selectedHouse === house.id}"
                @click="selectHouse(house.id)"
            >
              <i class="el-icon-house house-icon"></i>
              <p class="house-number">{{ house.number }}</p>
              <p class="house-type">{{ house.type }}</p>
              <p class="house-area">{{ house.area }}㎡</p>
              <el-tag
                  v-if="house.lastCheck"
                  :type="getHouseStatus(house.lastCheck.score)"
                  size="mini"
              >
                {{ getHouseStatusText(house.lastCheck.score) }}
              </el-tag>
            </div>
          </el-col>
        </el-row>

        <div class="step-actions">
          <el-button
              type="primary"
              :disabled="!selectedHouse"
              @click="checkStep = 2"
              class="action-button"
          >
            下一步
          </el-button>
        </div>
      </div>

      <!-- 具体检查项 -->
      <div v-else-if="checkStep === 2" class="step-content">
        <h3 class="step-title">房屋检查项</h3>
        <div class="house-info">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="房屋编号">{{ currentHouse.number }}</el-descriptions-item>
            <el-descriptions-item label="房屋类型">{{ currentHouse.type }}</el-descriptions-item>
            <el-descriptions-item label="建筑面积">{{ currentHouse.area }}㎡</el-descriptions-item>
            <el-descriptions-item label="上次检查">
              {{ currentHouse.lastCheck ? currentHouse.lastCheck.time : '无记录' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <el-card
            v-for="(item, index) in checkItems"
            :key="index"
            class="check-item"
        >
          <div slot="header" class="item-header">
            <span class="item-name">{{ item.name }}</span>
            <el-rate
                v-model="item.score"
                :colors="['#F56C6C', '#E6A23C', '#67C23A']"
                :max="3"
                show-text
                :texts="['不合格', '合格', '优秀']"
                class="item-rating"
            ></el-rate>
          </div>

          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入检查备注（可选）"
              v-model="item.comment"
              class="item-comment"
          ></el-input>

          <div class="upload-area">
            <el-upload
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :auto-upload="false"
                :limit="3"
                :file-list="item.photos"
                class="photo-upload"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="upload-tip">最多上传3张照片</div>
            </el-upload>
          </div>
        </el-card>

        <div class="step-actions">
          <el-button @click="checkStep = 1" class="action-button">
            上一步
          </el-button>
          <el-button
              type="primary"
              @click="checkStep = 3"
              class="action-button"
          >
            下一步
          </el-button>
        </div>
      </div>

      <!-- 提交检查结果 -->
      <div v-else-if="checkStep === 3" class="step-content">
        <h3 class="step-title">房屋检查结果汇总</h3>

        <el-card class="result-summary">
          <el-descriptions
              :column="2"
              border
              class="summary-table"
          >
            <el-descriptions-item label="房屋编号" label-class-name="summary-label">
              {{ currentHouse.number }}
            </el-descriptions-item>
            <el-descriptions-item label="房屋类型" label-class-name="summary-label">
              {{ currentHouse.type }}
            </el-descriptions-item>
            <el-descriptions-item label="检查类型" label-class-name="summary-label">
              {{ currentType.title }}检查
            </el-descriptions-item>
            <el-descriptions-item label="检查时间" label-class-name="summary-label">
              {{ new Date().toLocaleString() }}
            </el-descriptions-item>
            <el-descriptions-item label="检查人" label-class-name="summary-label">
              当前用户
            </el-descriptions-item>
            <el-descriptions-item label="综合评分" label-class-name="summary-label">
              <el-rate
                  v-model="averageScore"
                  disabled
                  :colors="['#F56C6C', '#E6A23C', '#67C23A']"
                  :max="3"
              ></el-rate>
            </el-descriptions-item>
          </el-descriptions>

          <h4 class="items-title">检查项详情</h4>
          <el-table
              :data="checkItems"
              border
              class="items-table"
          >
            <el-table-column
                prop="name"
                label="检查项"
                width="180"
            ></el-table-column>
            <el-table-column
                prop="score"
                label="评分"
                width="150"
            >
              <template #default="{row}">
                <el-rate
                    v-model="row.score"
                    disabled
                    :colors="['#F56C6C', '#E6A23C', '#67C23A']"
                    :max="3"
                ></el-rate>
              </template>
            </el-table-column>
            <el-table-column
                prop="comment"
                label="备注"
            ></el-table-column>
            <el-table-column
                label="照片"
                width="120"
            >
              <template #default="{row}">
                <span v-if="row.photos.length > 0">{{ row.photos.length }}张</span>
                <span v-else>无</span>
              </template>
            </el-table-column>
          </el-table>

          <div class="final-comment">
            <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入总体评价（可选）"
                v-model="finalComment"
                class="comment-input"
            ></el-input>
          </div>
        </el-card>

        <div class="step-actions">
          <el-button @click="checkStep = 2" class="action-button">
            上一步
          </el-button>
          <el-button
              type="primary"
              @click="submitCheckResult"
              class="submit-button"
          >
            提交检查
          </el-button>
        </div>
      </div>
    </div>

    <!-- 房屋检查详情对话框 -->
    <el-dialog
        :visible.sync="detailDialogVisible"
        :title="`房屋检查详情 - ${currentDetail.houseNumber || ''}`"
        width="70%"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="房屋编号">{{ currentDetail.houseNumber }}</el-descriptions-item>
        <el-descriptions-item label="检查类型">{{ currentDetail.type }}</el-descriptions-item>
        <el-descriptions-item label="检查时间">{{ currentDetail.checkTime }}</el-descriptions-item>
        <el-descriptions-item label="检查人">{{ currentDetail.checker }}</el-descriptions-item>
        <el-descriptions-item label="综合评分">
          <el-rate
              v-model="currentDetail.score"
              disabled
              :colors="['#F56C6C', '#E6A23C', '#67C23A']"
              :max="3"
          ></el-rate>
        </el-descriptions-item>
      </el-descriptions>

      <h3 style="margin-top: 20px;">检查项详情</h3>
      <el-table :data="currentDetail.items" border>
        <el-table-column prop="name" label="检查项"></el-table-column>
        <el-table-column prop="score" label="评分" width="120">
          <template #default="{row}">
            <el-rate
                v-model="row.score"
                disabled
                :colors="['#F56C6C', '#E6A23C', '#67C23A']"
                :max="3"
            ></el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="备注"></el-table-column>
      </el-table>

      <div v-if="currentDetail.comment" style="margin-top: 20px;">
        <h3>总体评价</h3>
        <el-input
            type="textarea"
            :value="currentDetail.comment"
            :autosize="{ minRows: 2 }"
            readonly
        ></el-input>
      </div>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog
        :visible.sync="imageDialogVisible"
        title="图片预览"
    >
      <img width="100%" :src="dialogImageUrl" alt="检查图片">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HouseCheck',
  data() {
    return {
      // 当前视图状态
      currentView: 'main', // 'main' 或 'type'
      currentType: {},
      checkStep: 1, // 1: 选择房屋, 2: 进行检查, 3: 提交结果

      // 主菜单数据（3种检查类型）
      menuItems: [
        {
          type: 'facility',
          title: '设施设备',
          icon: 'el-icon-setting',
          color: '#67C23A',
          completed: 18,
          pending: 2
        },
        {
          type: 'safety',
          title: '安全检查',
          icon: 'el-icon-lock',
          color: '#E6A23C',
          completed: 8,
          pending: 1
        },
        {
          type: 'hygiene',
          title: '卫生检查',
          icon: 'el-icon-brush',
          color: '#F56C6C',
          completed: 15,
          pending: 4
        }
      ],

      // 房屋数据
      houses: [
        { id: 'H001', number: '1栋101', type: '二室一厅', area: 85, lastCheck: null },
        { id: 'H002', number: '1栋102', type: '二室一厅', area: 85, lastCheck: { score: 2, time: '2023-05-10' } },
        { id: 'H003', number: '1栋201', type: '三室一厅', area: 110, lastCheck: { score: 3, time: '2023-05-12' } },
        { id: 'H004', number: '1栋202', type: '三室一厅', area: 110, lastCheck: { score: 1, time: '2023-05-15' } },
        { id: 'H005', number: '2栋101', type: '一室一厅', area: 65, lastCheck: null },
        { id: 'H006', number: '2栋102', type: '一室一厅', area: 65, lastCheck: { score: 2, time: '2023-05-18' } },
        { id: 'H007', number: '2栋201', type: '二室一厅', area: 85, lastCheck: { score: 3, time: '2023-05-20' } },
        { id: 'H008', number: '2栋202', type: '二室一厅', area: 85, lastCheck: { score: 2, time: '2023-05-22' } }
      ],
      houseSearch: '',
      selectedHouse: '',

      // 检查项数据
      checkItems: [],

      // 已检查房屋数据（8条记录）
      checkedHouses: [
        {
          houseNumber: '1栋101',
          type: '设施设备',
          area: '厨房',
          score: 3,
          checkTime: '2023-06-01 10:00',
          checker: '张三',
          items: [
            { name: '水电设施', score: 3, comment: '水电设施正常' },
            { name: '燃气设施', score: 3, comment: '燃气管道无泄漏' }
          ],
          comment: '所有设施设备运行正常'
        },
        {
          houseNumber: '1栋102',
          type: '安全检查',
          area: '楼道',
          score: 2,
          checkTime: '2023-06-02 14:30',
          checker: '李四',
          items: [
            { name: '消防设备', score: 2, comment: '灭火器需要更换' },
            { name: '逃生通道', score: 3, comment: '通道畅通' }
          ],
          comment: '消防设备需要维护'
        },
        {
          houseNumber: '2栋101',
          type: '卫生检查',
          area: '卫生间',
          score: 1,
          checkTime: '2023-06-03 09:00',
          checker: '王五',
          items: [
            { name: '厨房卫生', score: 1, comment: '有异味，需要清洁' },
            { name: '卫生间卫生', score: 2, comment: '瓷砖有污渍' }
          ],
          comment: '整体卫生状况不佳，需加强清洁'
        },
        {
          houseNumber: '2栋102',
          type: '设施设备',
          area: '客厅',
          score: 2,
          checkTime: '2023-06-04 13:00',
          checker: '张三',
          items: [
            { name: '电器设备', score: 2, comment: '空调运行异常' },
            { name: '卫浴设施', score: 3, comment: '水龙头正常' }
          ],
          comment: '部分电器需要维修'
        },
        {
          houseNumber: '1栋201',
          type: '安全检查',
          area: '阳台',
          score: 3,
          checkTime: '2023-06-05 11:00',
          checker: '李四',
          items: [
            { name: '电路安全', score: 3, comment: '电路正常' },
            { name: '防盗设施', score: 3, comment: '防盗网完好' }
          ],
          comment: '安全状况良好'
        },
        {
          houseNumber: '1栋202',
          type: '卫生检查',
          area: '卧室',
          score: 2,
          checkTime: '2023-06-06 15:00',
          checker: '王五',
          items: [
            { name: '公共区域卫生', score: 2, comment: '地面有杂物' },
            { name: '垃圾处理', score: 3, comment: '垃圾及时清理' }
          ],
          comment: '公共区域需要打扫'
        },
        {
          houseNumber: '2栋201',
          type: '设施设备',
          area: '主卧',
          score: 2,
          checkTime: '2023-06-07 10:30',
          checker: '张三',
          items: [
            { name: '水电设施', score: 2, comment: '插座接触不良' },
            { name: '电器设备', score: 3, comment: '照明正常' }
          ],
          comment: '部分插座需要维修'
        },
        {
          houseNumber: '2栋202',
          type: '安全检查',
          area: '厨房',
          score: 1,
          checkTime: '2023-06-08 14:00',
          checker: '李四',
          items: [
            { name: '燃气安全', score: 1, comment: '燃气报警器故障' },
            { name: '电路安全', score: 2, comment: '线路老化' }
          ],
          comment: '存在安全隐患，需立即整改'
        }
      ],

      // 当前房屋信息
      currentHouse: {},

      // 最终评价
      finalComment: '',

      // 对话框控制
      detailDialogVisible: false,
      imageDialogVisible: false,
      currentDetail: {},
      dialogImageUrl: ''
    }
  },
  computed: {
    // 过滤房屋列表
    filteredHouses() {
      return this.houses.filter(house =>
          house.number.includes(this.houseSearch) ||
          house.id.includes(this.houseSearch)
      );
    },

    // 计算平均分
    averageScore() {
      if (this.checkItems.length === 0) return 0;
      const total = this.checkItems.reduce((sum, item) => sum + (item.score || 0), 0);
      return Math.round(total / this.checkItems.length * 10) / 10;
    },

    // 获取当前选中的房屋
    selectedHouseData() {
      return this.houses.find(house => house.id === this.selectedHouse) || {};
    }
  },
  methods: {
    // 刷新数据
    refreshData() {
      this.$message.success('数据已刷新');
    },

    // 进入具体检查类型
    enterCheckType(type) {
      this.currentType = this.menuItems.find(item => item.type === type);
      this.currentView = 'type';
      this.checkStep = 1;
      this.selectedHouse = '';
      this.houseSearch = '';
      this.loadCheckItems(type);
    },

    // 返回主菜单
    backToMain() {
      this.currentView = 'main';
    },

    // 选择房屋
    selectHouse(houseId) {
      this.selectedHouse = houseId;
      this.currentHouse = this.houses.find(house => house.id === houseId) || {};
    },

    // 加载检查项
    loadCheckItems(type) {
      // 模拟根据不同类型加载不同的检查项
      const itemsMap = {
        facility: [
          { name: '水电设施', score: null, comment: '', photos: [] },
          { name: '燃气设施', score: null, comment: '', photos: [] },
          { name: '卫浴设施', score: null, comment: '', photos: [] },
          { name: '电器设备', score: null, comment: '', photos: [] }
        ],
        safety: [
          { name: '消防设备', score: null, comment: '', photos: [] },
          { name: '逃生通道', score: null, comment: '', photos: [] },
          { name: '电路安全', score: null, comment: '', photos: [] },
          { name: '防盗设施', score: null, comment: '', photos: [] }
        ],
        hygiene: [
          { name: '厨房卫生', score: null, comment: '', photos: [] },
          { name: '卫生间卫生', score: null, comment: '', photos: [] },
          { name: '公共区域卫生', score: null, comment: '', photos: [] },
          { name: '垃圾处理', score: null, comment: '', photos: [] }
        ]
      };

      this.checkItems = JSON.parse(JSON.stringify(itemsMap[type] || []));
    },

    // 获取房屋状态
    getHouseStatus(score) {
      if (!score) return 'info';
      return score >= 2.5 ? 'success' : score >= 1.5 ? 'warning' : 'danger';
    },

    // 获取房屋状态文本
    getHouseStatusText(score) {
      if (!score) return '未检查';
      return score >= 2.5 ? '优秀' : score >= 1.5 ? '合格' : '不合格';
    },

    // 查看详情
    viewDetail(row) {
      this.currentDetail = row;
      this.detailDialogVisible = true;
    },

    // 处理图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imageDialogVisible = true;
    },

    // 处理图片删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    // 提交检查结果
    submitCheckResult() {
      // 验证所有检查项是否完成
      const incomplete = this.checkItems.some(item => item.score === null);
      if (incomplete) {
        this.$message.error('请完成所有检查项评分');
        return;
      }

      // 创建检查记录
      const checkRecord = {
        houseNumber: this.currentHouse.number,
        type: this.currentType.title,
        area: this.currentHouse.type,
        score: this.averageScore,
        checkTime: new Date().toLocaleString(),
        checker: '当前用户',
        items: JSON.parse(JSON.stringify(this.checkItems)),
        comment: this.finalComment
      };

      // 添加到已检查列表
      this.checkedHouses.unshift(checkRecord);

      // 更新房屋最后检查记录
      const houseIndex = this.houses.findIndex(h => h.id === this.selectedHouse);
      if (houseIndex !== -1) {
        this.houses[houseIndex].lastCheck = {
          score: this.averageScore,
          time: new Date().toLocaleDateString()
        };
      }

      // 更新统计数据
      this.menuItems.find(item => item.type === this.currentType.type).completed++;

      this.$message.success('房屋检查结果已提交');

      // 重置状态
      this.currentView = 'main';
      this.checkStep = 1;
      this.selectedHouse = '';
      this.finalComment = '';
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.check-container {
  position: relative;
  min-height: 100vh;
  padding: 20px;
  background-color: #f5f7fa;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}



/* 主菜单样式 */
.main-view {
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding: 25px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
}

.header h1 {
  color: #303133;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
}

.subtitle {
  color: #606266;
  font-size: 16px;
  margin: 0;
}

.menu-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
}

.menu-card {
  flex: 1;
  min-width: 250px;
  max-width: calc(33.33% - 20px); /* 3列布局 */
  padding: 25px 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  background: #fff;
  border: none;
}

.menu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-title {
  color: #303133;
  margin: 15px 0;
  font-size: 18px;
  font-weight: 500;
}

.stats-container {
  display: flex;
  justify-content: space-around ;
  margin-top: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-label {
  color: #909399;
  font-size: 13px;
  margin-bottom: 5px;
}

.stat-value {
  color: #303133;
  font-size: 18px;
  font-weight: 500;
}

.dashboard {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
  border: none;
}

.dashboard-header {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.chart-container {
  width: 100%;
  padding: 10px;
}

/* 二级界面样式 */
.type-view {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
}

.type-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.type-title {
  margin-left: 15px;
  color: #303133;
  font-size: 22px;
  font-weight: 500;
}

.steps-container {
  margin: 25px 0;
}

.step-content {
  margin-top: 25px;
  padding: 0 10px;
}

.step-title {
  color: #303133;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.house-info {
  margin-bottom: 20px;
}

.house-card {
  background: #fff;
  border-radius: 6px;
  padding: 20px 10px;
  margin-bottom: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
}

.house-card:hover {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}

.house-card.selected {
  border-color: #409EFF;
  background-color: #f0f7ff;
  box-shadow: 0 4px 12px 0 rgba(64, 158, 255, 0.2);
}

.house-icon {
  font-size: 36px;
  color: #409EFF;
  margin-bottom: 10px;
}

.house-number {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.house-type, .house-area {
  margin: 5px 0;
  font-size: 14px;
  color: #606266;
}

.check-item {
  margin-bottom: 25px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.item-name {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.item-rating {
  margin-left: 15px;
}

.item-comment {
  margin-top: 15px;
}

.upload-area {
  margin-top: 20px;
}

.photo-upload {
  margin-top: 10px;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
}

.step-actions {
  text-align: center;
  margin-top: 35px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.action-button {
  min-width: 120px;
  height: 40px;
  font-size: 15px;
  margin: 0 10px;
}

.submit-button {
  background-color: #67C23A;
  border-color: #67C23A;
}

.submit-button:hover {
  background-color: #5daf34;
  border-color: #5daf34;
}

.result-summary {
  margin-top: 20px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.summary-table {
  margin-top: 15px;
}

.summary-label {
  font-weight: 500;
  color: #303133 !important;
  background-color: #f5f7fa !important;
}

.items-title {
  font-size: 17px;
  color: #303133;
  font-weight: 500;
  margin: 25px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.items-table {
  margin-top: 15px;
}

.final-comment {
  margin-top: 25px;
}

.comment-input {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .menu-card {
    max-width: calc(50% - 15px); /* 中等屏幕显示2列 */
  }

  .house-card {
    padding: 15px 5px;
  }
}

@media (max-width:768px) {
  .header h1 {
    font-size: 24px;
  }

  .subtitle {
    font-size: 15px;
  }

  .menu-card {
    max-width: 100%; /* 小屏幕显示1列 */
    min-width: 100%;
  }

  .card-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }

  .type-view {
    padding: 15px;
  }

  .type-title {
    font-size: 20px;
  }

  .house-icon {
    font-size: 28px;
  }

  .house-number {
    font-size: 15px;
  }

  .house-type, .house-area {
    font-size: 13px;
  }

  .action-button {
    min-width: 100px;
    height: 36px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 15px;
  }

  .header h1 {
    font-size: 22px;
  }

  .check-container {
    padding: 15px;
  }

  .step-title {
    font-size: 18px;
  }

  .item-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .item-rating {
    margin-left: 0;
    margin-top: 10px;
  }
}
</style>